<template>
  <div class="gl-border">

    <div class="content-item">
      <span>关键字：<el-input v-model="queryParams.key"
                  style="width: 300px;"
                  size="small"
                  placeholder="输入配置名称"></el-input></span>
      <el-button type="primary"
                 size="small"
                 @click="query()">搜索</el-button>
      <el-button type=""
                 size="small"
                 @click="addSet">+新增配置</el-button>
    </div>
    <div class="content-item">
      <TabList :tabData="tabData"
               class=" table-header-gray"
               :specCol="sepecCol"
               :columns="columns"></TabList>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>
  </div>
</template>
<script>
import { pagination } from '@/tools/mixin'
import {
  listSettingConfigUsingPOST
} from '@api/auto'
export default {
  mixins: [pagination],
  data () {
    return {
      total: 0,
      queryParams: {
        key: '',
        type: 0,
        size: 10,
        page: 1
      },
      dialogShow: false,
      tabData: [],
      columns: [
        { label: '配置名称', prop: 'name' },
        { label: '配置单元', prop: 'unit' },
        { label: '适用类型', prop: 'applianceTypeName' },
        { label: '适用年级', prop: 'applianceGrade' },
        { label: '已选人数', prop: 'totalStudentNum' },
        // { label: '已选床位数', prop: 'totalBedNum' },
        { label: '创建时间', prop: 'createTime' },
        { label: '操作', prop: 'func' }
      ],
      sepecCol: [
        {
          label: '适用类型',
          prop: 'applianceTypeName',
          tem: `<span>{{row.applianceTypeName || '不限'}}</span>`
        },
        {
          label: '适用年级',
          prop: 'applianceSex',
          tem: `<span>{{row.applianceGrade || '不限'}}</span>`
        },
        { label: '适用性别',
          prop: 'applianceSex',
          tem: `<span>{{$transSex(row.applianceSex)}}</span>` },
        { label: '创建时间',
          prop: 'createTime',
          tem: `<span>{{$moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>` },
        { label: '操作',
          prop: 'func',
          tem: `<div>
          <el-button type="text" @click="that.$parent.toDetail(row)">详情</el-button>
        <el-button type="text" @click="that.$parent.intoEditHistory(row)">结果</el-button>
        </div>` }
      ]
    }
  },
  created () {
    this.query()
  },
  methods: {
    toDetail (row) {
      sessionStorage.editRow = JSON.stringify(row)
      this.$router.push({ name: 'batchOutRoomEditDetail' })
    },
    intoEditHistory (row) {
      sessionStorage.editRow = JSON.stringify(row)
      this.$router.push({ name: 'batchOutEditHistory' })
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      listSettingConfigUsingPOST(this.queryParams).then(res => {
        this.tabData = res.data.list
        this.total = res.data.total || 0
      })
    },
    handleClose () {
      this.dialogShow = false
    },
    addSet () {
      this.$router.push({ name: 'batchOutRoomaddSet' })
    }
  }
}
</script>
